<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const userAvatar = ref('https://api.dicebear.com/7.x/avataaars/svg?seed=user')
const isMemberAreaOpen = ref(false)
const activeFaq = ref(null)

// 检查用户登录状态
const checkLoginStatus = () => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (!isLoggedIn) {
    router.push('/login')
    return
  }
  username.value = localStorage.getItem('username') || ''
}

// 退出登录函数
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('username')
  router.push('/login')
}

// 切换会员区域显示状态
const toggleMemberArea = () => {
  isMemberAreaOpen.value = !isMemberAreaOpen.value
}

// 切换FAQ显示状态
const toggleFaq = (id) => {
  activeFaq.value = activeFaq.value === id ? null : id
}

// 导航到其他页面
const navigateTo = (route) => {
  router.push(route)
}

onMounted(() => {
  checkLoginStatus()
})
</script>

<template>
  <div class="service-center-container">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>服务中心</h1>
        <p class="page-description">一站式管理您的服务需求</p>
      </div>

      <div class="service-layout">
        <!-- 侧边导航 -->
        <div class="sidebar">
          <div class="user-profile-mini">
            <img :src="userAvatar" alt="用户头像" class="user-avatar-small">
            <div class="user-info">
              <p class="username-mini">{{ username || '用户123456' }}</p>
              <button class="logout-btn" @click="handleLogout">退出</button>
            </div>
          </div>

          <nav class="service-nav">
            <ul class="service-menu">
              <li class="service-menu-item" @click="navigateTo('/orders')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>我的订单</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <li class="service-menu-item" @click="navigateTo('/coupons')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 2V6C16 7.10457 16.8954 8 18 8H22M8 22V18C8 16.8954 7.10457 16 6 16H2M2 6H22M22 6V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>优惠券</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <li class="service-menu-item active" @click="navigateTo('/service-center')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>客户服务</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <li class="service-menu-item" @click="navigateTo('/logistics')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 6L13 11L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 6L20 11L15 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3 11H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>物流查询</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <li class="service-menu-item" @click="navigateTo('/returns')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 21V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>退换货</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <li class="service-menu-item" @click="navigateTo('/cart')">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 4H8C6.89543 4 6 4.89543 6 6V20C6 21.1046 6.89543 22 8 22H16C17.1046 22 18 21.1046 18 20V6C18 4.89543 17.1046 4 16 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14 2H21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14 2V5C14 6.65685 12.6569 8 11 8H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>购物车</span>
                <div class="menu-arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <!-- 会员服务区域 -->
              <li class="service-menu-item member-item" @click="toggleMemberArea">
                <div class="menu-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
                <span>会员服务</span>
                <div class="menu-arrow" :class="{ 'rotate-90': isMemberAreaOpen }">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>
              </li>

              <!-- 会员区域子菜单 -->
              <transition name="member-menu">
                <li v-if="isMemberAreaOpen" class="member-submenu">
                  <div class="member-card" @click="navigateTo('/member-center')">
                    <div class="member-icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 16V12" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 8H12.01" stroke="#FFD700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="member-info">
                      <p class="member-title">会员中心</p>
                      <p class="member-level">普通会员</p>
                    </div>
                    <span class="member-benefit">享会员价</span>
                  </div>
                </li>
              </transition>
            </ul>
          </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
          <div class="service-card">
            <h2>客户服务中心</h2>
            <p>欢迎来到客户服务中心，我们将竭诚为您提供帮助</p>
            
            <!-- 服务分类 -->
            <div class="service-categories">
              <div class="service-category">
                <h3>订单服务</h3>
                <div class="service-items">
                  <div class="service-item" @click="navigateTo('/order-status')">
                    <div class="service-item-icon">
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="service-item-info">
                      <h4>订单状态查询</h4>
                      <p>查看您的订单处理进度</p>
                    </div>
                  </div>
                  
                  <div class="service-item" @click="navigateTo('/order-modify')">
                    <div class="service-item-icon">
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89783 22.1213 3.43742 22.1213 4C22.1213 4.56258 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="service-item-info">
                      <h4>修改订单信息</h4>
                      <p>调整收货地址、联系电话等信息</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="service-category">
                <h3>售后支持</h3>
                <div class="service-items">
                  <div class="service-item" @click="navigateTo('/returns-process')">
                    <div class="service-item-icon">
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 21V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="service-item-info">
                      <h4>退换货流程</h4>
                      <p>了解如何申请退换货</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="service-category">
                <h3>物流服务</h3>
                <div class="service-items">
                  <div class="service-item" @click="navigateTo('/track-logistics')">
                    <div class="service-item-icon">
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 6L13 11L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M15 6L20 11L15 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 11H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="service-item-info">
                      <h4>物流追踪</h4>
                      <p>实时跟踪您的包裹位置</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 常见问题 -->
            <div class="faq-section">
              <h3>常见问题</h3>
              <div class="faq-items">
                <div class="faq-item">
                  <h4 @click="toggleFaq(1)">如何申请退款？</h4>
                  <p v-if="activeFaq === 1">您可以在"我的订单"页面找到需要退款的订单，点击"申请退款"按钮，按照提示填写退款原因和相关信息，提交后等待审核。</p>
                </div>
                <div class="faq-item">
                  <h4 @click="toggleFaq(2)">物流信息多久更新一次？</h4>
                  <p v-if="activeFaq === 2">物流信息通常会在包裹状态变更后的24小时内更新，具体时间可能因物流公司而异。</p>
                </div>
                <div class="faq-item">
                  <h4 @click="toggleFaq(3)">会员等级有什么权益？</h4>
                  <p v-if="activeFaq === 3">不同等级的会员可以享受不同的权益，包括专属折扣、生日礼包、优先购买权等。您可以在会员中心查看详细的权益说明。</p>
                </div>
              </div>
            </div>

            <!-- 联系客服 -->
            <div class="contact-section">
              <h3>联系我们</h3>
              <p>如果您有任何问题或建议，请随时联系我们的客服团队</p>
              <div class="contact-methods">
                <div class="contact-method">
                  <div class="contact-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M22 22L20 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                  <p>在线客服</p>
                </div>
                <div class="contact-method">
                  <div class="contact-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22 16.92V19.75C22 20.1642 21.6642 20.5 21.25 20.5H2.75C2.33579 20.5 2 20.1642 2 19.75V16.92" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M22 12V14.83C22 15.2442 21.6642 15.58 21.25 15.58H2.75C2.33579 15.58 2 15.2442 2 14.83V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M22 7.08V9.91C22 10.3242 21.6642 10.66 21.25 10.66H2.75C2.33579 10.66 2 10.3242 2 9.91V7.08" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M22 2.25V5.08C22 5.49421 21.6642 5.83 21.25 5.83H2.75C2.33579 5.83 2 5.49421 2 5.08V2.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                  <p>400-123-4567</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.service-center-container {
  min-height: 100vh;
  background-color: var(--color-background);
  padding: 24px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.page-description {
  font-size: 16px;
  color: var(--color-text);
  opacity: 0.8;
}

.service-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex-shrink: 0;
}

.user-profile-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.user-avatar-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f0f0f0;
}

.user-info .username-mini {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading);
}

.logout-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}

.logout-btn:hover {
  color: #ff4d4f;
}

.service-nav .service-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.service-menu-item:hover {
  background-color: #f5f5f5;
}

.service-menu-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.menu-arrow.rotate-90 {
  transform: rotate(90deg);
}

/* 会员区域样式 */
.member-item {
  margin-top: 12px;
}

.member-submenu {
  margin: 8px 0 16px 0;
  padding: 0;
}

.member-card {
  background: linear-gradient(135deg, #fff7e6 0%, #fff1db 100%);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.member-card:hover {
  transform: translateY(-2px);
}

.member-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 215, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-info {
  flex: 1;
}

.member-title {
  font-size: 16px;
  font-weight: 600;
  color: #d48806;
  margin: 0 0 4px 0;
}

.member-level {
  font-size: 14px;
  color: #faad14;
  margin: 0;
}

.member-benefit {
  background-color: #faad14;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
}

.service-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.service-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
}

.service-card p {
  font-size: 16px;
  color: var(--color-text);
  opacity: 0.8;
  margin-bottom: 32px;
}

/* 服务分类样式 */
.service-categories {
  margin-bottom: 40px;
}

.service-category {
  margin-bottom: 32px;
}

.service-category h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.service-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.service-item-icon {
  width: 60px;
  height: 60px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  flex-shrink: 0;
}

.service-item-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 4px 0;
}

.service-item-info p {
  font-size: 14px;
  color: var(--color-text);
  opacity: 0.7;
  margin: 0;
}

/* 常见问题样式 */
.faq-section {
  margin-bottom: 40px;
}

.faq-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-heading);
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.3s ease;
}

.faq-item h4:hover {
  background-color: #f0f0f0;
}

.faq-item p {
  padding: 16px;
  margin: 0;
  border: 1px solid #f0f0f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background-color: white;
}

/* 联系我们样式 */
.contact-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.contact-section p {
  margin-bottom: 24px;
}

.contact-methods {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.contact-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  flex: 1;
  min-width: 150px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-method:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.contact-icon {
  width: 48px;
  height: 48px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
}

.contact-method p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-heading);
}

/* 动画 */
.member-menu-enter-active,
.member-menu-leave-active {
  transition: all 0.3s ease;
}

.member-menu-enter-from,
.member-menu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .service-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .service-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
  }
  
  .service-menu-item {
    padding: 12px 16px;
    flex-direction: column;
    text-align: center;
  }
  
  .menu-arrow {
    display: none;
  }
  
  .member-submenu {
    grid-column: 1 / -1;
  }
  
  .member-card {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }
  
  .service-card {
    padding: 24px;
  }
  
  .service-items {
    grid-template-columns: 1fr;
  }
  
  .contact-methods {
    flex-direction: column;
  }
  
  .contact-method {
    min-width: auto;
  }
}
</style>

<style>
:root {
  --transition-fast: 0.2s ease;
}
</style>